<template>
  <d2-container  :class="{'page-compact':crud.pageOptions.compact}">
    <d2-crud-x
        ref="d2Crud"
        v-bind="_crudProps"
        v-on="_crudListeners"
        @custom-emit="details"
    >
      <div slot="header" style="margin-top: 1em">
        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" @search-data-change="handleSearchDataChange"  />
        <el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus" /> 新增</el-button>
        <crud-toolbar :search.sync="crud.searchOptions.show"
                      :compact.sync="crud.pageOptions.compact"
                      :columns="crud.columns"
                      @refresh="doRefresh()"
                      @columns-filter-changed="handleColumnsFilterChanged"/>
      </div>
    </d2-crud-x>
    <el-dialog class="d2-crud-dialog"
               title="查看"
               :visible.sync="dialogFormVisible"
               :fullscreen="formOptions.fullscreen"
               @close="fullscreenClose"
               @opened="dialogOpened">
      <el-form :model="form" ref="form">
        <el-row>
          <el-col :span="18">
            <el-form-item label="ID" :label-width="formLabelWidth" >
              <el-input v-model="form.id" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="品牌" :label-width="formLabelWidth">
              <el-input v-model="form.brandName" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="型号" :label-width="formLabelWidth">
              <el-input v-model="form.modelName" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="类型" :label-width="formLabelWidth" >
              <el-input v-model="form.stbType" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="价格" :label-width="formLabelWidth" >
              <el-input v-model="form.price" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <div id="stbType-price" style="width: 750px;height:400px;"></div>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <button v-if="formOptions.fullscreen!=null" type="button"  class="el-dialog__headerbtn fullscreen" @click="formOptions.fullscreen = !formOptions.fullscreen" >
          <i class="el-dialog__close el-icon el-icon-full-screen"/>
        </button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
import echarts from 'echarts'
import { AddObj, GetList, UpdateObj, DelObj, GetDetails } from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
export default {
  name: 'formLinkage',
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      show: true,
      dialogFormVisible: false,
      form: {
        brandId: '',
        brandName: '',
        id: '',
        modelId: '',
        modelName: '',
        price: '',
        stbType: '',
        version: ''
      },
      formLabelWidth: '120px',
      formOptions: {
        fullscreen: false
      }
    }
  },
  mounted () {
    console.log('dict cache：', d2CrudPlus.util.dict.getCache())
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return GetList(query)
    },
    addRequest (row) {
      return AddObj(row)
    },
    updateRequest (row) {
      return UpdateObj(row)
    },
    delRequest (row) {
      return DelObj(row.id)
    },
    details ($event) {
      console.log('自定义按钮事件：', $event)
      this.form = $event.row
      this.dialogFormVisible = true
    },
    fullscreenClose () {
      this.$refs.form.resetFields()
      this.form = {}
      this.formOptions.fullscreen = false
    },
    dialogOpened () {
      var myChart = echarts.init(document.getElementById('stbType-price'))
      GetDetails(this.form.id).then(ret => {
        if (ret.statusCode === 2000) {
          var stbPriceRecords = ret.data.stbPriceRecords
          var timestampToTime2 = function (timestamp) {
            var date = new Date(timestamp * 1000)
            var y = date.getFullYear()
            let MM = date.getMonth() + 1
            MM = MM < 10 ? ('0' + MM) : MM
            let d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            let h = date.getHours()
            h = h < 10 ? ('0' + h) : h
            let m = date.getMinutes()
            m = m < 10 ? ('0' + m) : m
            let s = date.getSeconds()
            s = s < 10 ? ('0' + s) : s
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
          }
          if (stbPriceRecords !== null && stbPriceRecords !== undefined) {
            // 指定图表的配置项和数据
            myChart.setOption({
              title: {
                text: '价格变动(单位：元)'
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                data: stbPriceRecords.map(function (item) {
                  return timestampToTime2(item.createTime)
                })
              },
              yAxis: {
                splitLine: {
                  show: false
                }
              },
              toolbox: {
                left: 'center',
                feature: {
                  dataZoom: {
                    yAxisIndex: 'none'
                  },
                  restore: {},
                  saveAsImage: {}
                }
              },
              dataZoom: [{
                startValue: '2020-10-01'
              }, {
                type: 'inside'
              }],
              series: {
                name: '价格',
                type: 'line',
                data: stbPriceRecords.map(function (item) {
                  return item.price
                }),
                markLine: {
                  silent: true,
                  data: [{
                    yAxis: 50
                  }, {
                    yAxis: 100
                  }, {
                    yAxis: 150
                  }, {
                    yAxis: 200
                  }, {
                    yAxis: 300
                  }]
                }
              }
            })
          }
        }
      })
      // console.log(`打开dialog${myChart.toString()}`)
    }
  }
}
</script>
